<template>
  <a-modal
    :visible="visible"
    title="卡密兑换"
    centered
    @cancel="onClose"
    @ok="camiSubmit"
    okText="立即兑换"
    :width="420"
    :body-style="{
      padding: '24px 16px',
    }"
  >
    <a-form-item label="兑换码" style="margin-top: 20px">
      <a-input-search
        v-model:value="camiPassword"
        placeholder="请输入兑换码"
        @search="getCamiInfo"
      >
        <template #enterButton>
          <a-button type="primary">
            <SearchOutlined />
            查询
          </a-button>
        </template>
      </a-input-search>
    </a-form-item>
    <template v-if="camiInfo.id">
      <a-alert
        message="该套餐为团队套餐，请先切换至团队身份"
        type="warning"
        show-icon
        style="margin-bottom: 10px"
        v-if="showTeamWarning"
      />
      <div>
        <span style="color: #666; margin-right: 5px">卡密类型：</span>
        <span>{{ camiInfo.type_txt }}</span>
      </div>
      <template v-if="camiInfo.type == 1">
        <div style="margin-top: 5px">
          <span style="color: #666; margin-right: 5px">套餐名称：</span>
          <span>{{ camiInfo.order_package.name }}</span>
        </div>
        <div style="margin-top: 5px">
          <span style="color: #666; margin-right: 5px">套餐类型：</span>
          <span>{{
            camiInfo.order_package.is_team ? "团队套餐" : "个人套餐"
          }}</span>
        </div>
        <div style="margin-top: 5px">
          <span style="color: #666; margin-right: 5px">有效天数：</span>
          <span>{{ camiInfo.order_package.day || "--" }}</span>
        </div>
        <div style="margin-top: 5px">
          <span style="color: #666; margin-right: 5px">对话次数：</span>
          <span>{{ camiInfo.order_package.numbers || "--" }}</span>
        </div>
        <div style="margin-top: 5px">
          <span style="color: #666; margin-right: 5px">绘画次数：</span>
          <span>{{ camiInfo.order_package.art_numbers || "--" }}</span>
        </div>
        
      </template>
      <template v-else>
        <div style="margin-top: 5px">
          <span style="color: #666; margin-right: 5px">对话次数：</span>
          <span>{{ camiInfo.chat_numbers || "--" }}</span>
        </div>
        <div style="margin-top: 5px">
          <span style="color: #666; margin-right: 5px">绘画次数：</span>
          <span>{{ camiInfo.draw_numbers || "--" }}</span>
        </div>
      </template>
      <div style="margin-top: 5px" v-if="currentTeam.id">
          <span style="color: #666; margin-right: 5px">团队成员数：</span>
          <span>{{ camiInfo.team_member_num}}</span>
        </div>
      <div style="margin-top: 5px">
        <span style="color: #666; margin-right: 5px">兑换身份：</span>
        <span>{{ currentTeam.name }}</span>
        <a-tag
          color="blue"
          style="border-radius: 4px; margin-left: 10px"
          v-if="currentTeam.id"
          >团队</a-tag
        >
        <a-tag
          color="green"
          style="border-radius: 4px; margin-left: 10px"
          v-else
          >个人</a-tag
        >
      </div>
    </template>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
  inject,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { SearchOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "CamiExchange",
  components: { SearchOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const changeTeamPopoverVisible = inject(["changeTeamPopoverVisible"]);
    const state = reactive({
      camiPassword: "",
      camiInfo: {},
      currentTeam: {},
      showTeamWarning: false,
    });
    const getCurrentTeam = () => {
      let teamId = store.state.user.teamId;

      if (teamId) {
        request.get("/work_ai", "/user/team", { id: teamId }).then((res) => {
          state.currentTeam = res.detail;
          state.showTeamWarning = false;
        });
      } else {
        state.currentTeam = {
          id: 0,
          name: "个人",
        };
        utils.getUserInfo().then((userInfo) => {
          if (userInfo.avatar) {
            state.currentTeam.name = userInfo.nickname;
            state.currentTeam.avatar = userInfo.avatar;
          }
        });
      }
    };

    const getCamiInfo = () => {
      state.camiInfo = {};
      if (!state.camiPassword) {
        message.error("兑换码不能为空");
        return;
      }
      request
        .get("/work_ai", "/user/carmi/get", {
          code: state.camiPassword,
        })
        .then((res) => {
          if (res.result) {
            if (res.result.id) {
              state.camiInfo = res.result;
              // 个人身份兑换团队套餐时
              if (
                state.camiInfo.order_package &&
                state.camiInfo.order_package.is_team &&
                state.currentTeam.id == 0
              ) {
                changeTeamPopoverVisible(true);
                state.showTeamWarning = true;
              }
            } else {
              message.error("兑换码无效");
            }
          }
        });
    };

    const camiSubmit = () => {
      if (!state.camiPassword) {
        message.error("兑换码不能为空");
        return;
      }
      let params = {
        code: state.camiPassword,
      };
      if (state.currentTeam.id > 0) {
        params.team_id = state.currentTeam.id;
      }
      request
        .post("/work_ai", "/user/carmi/exchange", {
          ...params,
        })
        .then((res) => {
          if (res.result) {
            message.success("兑换成功");
            context.emit("success");
          }
        });
    };

    const onClose = () => {
      context.emit("onClose");
    };

    const init = () => {
      getCurrentTeam();
    };

    watch(
      () => store.state.user.teamId,
      (val) => {
        init();
      }
    );

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          state.camiPassword = "";
          state.camiInfo = {};
          state.showTeamWarning = false;
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      camiSubmit,
      getCamiInfo,
    };
  },
});
</script>

<style lang="less" scoped></style>
